<template>
	<view class="overall">
		<view class="title">
			<view class="name" @click="handleClickLeft">
				<wd-icon name="thin-arrow-left" size="18px"></wd-icon>
				<view>就诊人详情</view>
			</view>
		</view>
		<view class="content">
			<view class="switch">
				<view>{{cardInfo.nickname}}</view>
				<view>院内就诊ID号：{{cardInfo.id}}</view>
				<view>
					<w-barcode :options="{
					    width: 600, // 宽度 单位rpx
					    height: 120, // 高度 单位rpx
					    code:cardInfo.card ,// 生成条形码的值
					}"></w-barcode>
				</view>
				<view>{{cardInfo.card}}</view>
			</view>

			<view class="checklist">
				<view class="list">
					<view>性别</view>
					<view>{{cardInfo.sex==1?'男':'女'}}</view>
				</view>
				<view class="list">
					<view>出生日期</view>
					<view>{{cardInfo.datetime}}</view>
				</view>
				<view class="list">
					<view>身份证</view>
					<view>{{cardInfo.code}}</view>
				</view>
				<view class="list">
					<view>手机号</view>
					<view>
						<view> {{cardInfo.tel}}</view>
						<view @click="revise()" class="tel"> 修改手机号</view>
					</view>
				</view>
				<view class="list">
					<view>地址</view>
					<view>{{cardInfo.address}}</view>
				</view>
			</view>
			<view class="list">
				<view>设置为默认</view>
				<view><wd-switch v-model="checked" @change='status' size="24px" /></view>
			</view>
		</view>
		<view class="bottom" @click="del(cardInfo.id)">删除就诊人</view>
	</view>

	<wd-popup v-model="show" custom-style="padding: 20rpx 20rpx;" @close="handleClose">
		<view class="reviseTel">
			<view>
				<view>修改手机号</view>
				<view>
					<input v-model="tel" type="number" placeholder="请输入手机号" />
				</view>
			</view>
			<view>
				<view @click="handleClose">取消</view>
				<view @click="confirm">确认</view>
			</view>
		</view>
	</wd-popup>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { visitEdit, visitDel } from '@/api/index.js';
	function handleClickLeft() {
		uni.navigateBack();
	}

	const cardInfo = ref([]);
	const tel = ref('');

	const checked = ref<boolean>(false);

	uni.getStorage({
		key: 'cardDetails',
		success: function (res) {
			console.log(res.data); // 输出存储的数据对象
			cardInfo.value = res.data;
			if (res.data.status == 1) {
				checked.value = true
			} else {
				checked.value = false
			}
		}
	});

	function status({ value }) {
		console.log(value);
		let state;
		if (value == true) {
			state = 1
			visitEdit({
				status: state,
				tel: cardInfo.value.tel,
				id: cardInfo.value.id,
				user_id: cardInfo.value.user_id,
			}).then(res => {
				console.log(res);
				if (res.code == 0) {
					uni.showToast({
						title: '设置失败',
						icon: 'none'
					});
					if (state == 1) {
						checked.value = false;
					} else {
						checked.value = true;
					}
				} else {
					cardInfo.value.status = state;
					uni.showToast({
						title: '设置成功',
						icon: 'none'
					});
				}
			})
		} else {
			uni.showToast({
				title: '默认就诊卡无法取消',
				icon: 'none'
			});
			if (state == 1) {
				checked.value = false;
			} else {
				checked.value = true;
			}
		}

	}

	const show = ref(false)
	function revise() {
		show.value = true;
	}

	function handleClose() {
		show.value = false;
		// tel.value = '';
	}
	// 手机正则表达式
	const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;

	function confirm() {
		const isPhoneValid = phoneReg.test(tel.value);
		if (isPhoneValid) {
			console.log('手机号格式正确');
			visitEdit({
				status: cardInfo.value.status,
				tel: cardInfo.value.tel,
				id: cardInfo.value.id,
				user_id: cardInfo.value.user_id,
			}).then(res => {
				console.log(res);
				handleClose();
				if (res.code == 0) {
					uni.showToast({
						title: '设置失败',
						icon: 'none'
					});
				} else {
					cardInfo.value.tel = tel.value;
					uni.showToast({
						title: '设置成功',
						icon: 'none'
					});
				}
			})
		} else {
			if (tel.value != "") {
				uni.showToast({
					title: '手机号码不正确',
					icon: 'error',
					duration: 3000,
				})
			}
			console.log('手机号码不正确');
		}
	}

	function del(id) {
		console.log(id);
		uni.showModal({
			title: '提示',
			content: '是否删除该就诊卡',
			showCancel: true,
			success: function (res) {
				if (res.confirm) {
					console.log('用户点击确定');
					visitDel({
						id: id
					}).then(res => {
						console.log(res);
						if (res.code == 1) {
							uni.showToast({
								title: '就诊卡已删除',
								icon: 'none'
							});
							uni.navigateBack();
						} else {
							uni.showToast({
								title: '就诊卡删除失败',
								icon: 'none'
							});
						}
					})
					// 点击确定按钮后的操作
				} else if (res.cancel) {
					console.log('用户点击取消');
					// 点击取消按钮后的操作
				}
			}
		});
	}
</script>

<style scoped>
	.overall {
		width: 100%;
		background-color: #F4F4F4;
		min-height: 100vh;
	}

	.title {
		width: 100%;
		height: 180rpx;
		background-color: #00DACA;
		color: white;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0%;
		z-index: 10000;
	}

	.name {
		display: flex;
		align-items: center;
		font-weight: bold;
		font-size: 42rpx;
		margin-top: 50rpx;
		margin-left: 3%;
	}

	.name>view {
		margin-left: 20rpx;
	}

	.content {
		width: 100%;
		margin-top: 180rpx;
	}

	.switch {
		width: 94%;
		min-height: 200rpx;
		padding: 20rpx 3%;
		background-color: white;
		margin-bottom: 20rpx;
	}

	.switch>view {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
	}
	.switch>view:nth-child(3){
		justify-content: center;
		padding: 50rpx 0;
	}

	.switch image {
		width: 50%;
		height: 300rpx;
		object-fit: cover;
	}

	.switch>view:last-child {
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: center;
	}

	.switch>view:first-child {
		font-weight: bold;
		font-size: 36rpx;
	}

	.checklist {
		width: 100%;
		min-height: 550rpx;
		background-color: white;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		padding-top: 30rpx;
	}

	.list {
		width: 94%;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 3%;
		background-color: white;
	}

	.tel {
		color: #00A89B;
		border: 3rpx #00A89B solid;
		padding: 12rpx 20rpx;
		border-radius: 2000rpx;
		margin-top: 10rpx;
	}

	.bottom {
		width: 94%;
		margin: 30rpx 3%;
		background-color: white;
		color: red;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
		border-radius: 1000rpx;
	}

	.reviseTel {
		width: 500rpx;
	}

	.reviseTel>view:first-child {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.reviseTel>view:first-child>view:first-child {
		font-weight: bold;
		font-size: 28rpx;
	}

	.reviseTel>view:first-child>view:last-child {
		border: 2rpx #ECECEC solid;
		width: 96%;
		padding: 2% 2rpx;
		border-radius: 5rpx;
		margin: 50rpx 0;
	}

	.reviseTel>view:last-child {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-between;
		border-top: 2rpx #D3D3D3 solid;
	}

	.reviseTel>view:last-child>view {
		width: 50%;
		height: 60rpx;
		padding-top: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.reviseTel>view:last-child>view:last-child {
		color: #43CF7C;
		border-left: 2rpx #D3D3D3 solid;
	}
</style>